<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>028-padding内边距</title>
		<style>
			.box {
				width: 200px;
				height: 200px;
				background-color: skyblue;
				/* 内边距：上、右、下、左都是 20px */
				padding: 20px;

				/* 内边距：上、右左、下 */
				/* padding: 10px 20px 30px; */

				/* 内边距：上下、左右 */
				/* padding: 20px 30px; */

				/* 内边距：上、右、下、左 */
				/* padding: 10px 20px 30px 40px; */
			}

			span {
				padding: 50px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="box">DIV</div>

		<hr />

		<!-- 注意：行内元素，设置左右内边距可以，上下内边距可以撑开，但不占位置 -->
		<span>SPAN</span>
		<div>Lorem ipsum dolor sit amet.</div>
	</body>
</html>
